import { useState } from 'react';
import { UserOutline } from 'antd-mobile-icons';
import styles from './index.module.css';
import img from './img/image.png'
import Nabar from '../../conpoment/Nabar';
import { useNavigate } from 'react-router-dom';

// 类型定义
interface DoctorInfo {
  id: number;
  doctorName: string;
  title: string;
  department: string;
  hospital: string;
  currentNumber: number;
  avatar: string;
}

interface ExaminationInfo {
  id: number;
  serviceName: string;
  hospital: string;
  waitingCount: number;
  type: string;
}

function Index() {
  const [activeTab, setActiveTab] = useState('候诊 (接诊)');
  const [showPatientList, setShowPatientList] = useState(false);
  const [currentPatient, setCurrentPatient] = useState({
    name: '王小柯',
    id: '2015****10'
  });

  // 患者列表数据
  const patientList = [
    { name: '王小柯', id: '2015****10' },
    { name: '李小明', id: '2016****20' },
    { name: '张小红', id: '2017****30' }
  ];

  // 候诊数据
  const waitingData: DoctorInfo[] = [
    {
      id: 1,
      doctorName: '刘医生',
      title: '主任医师',
      department: '门诊外一科',
      hospital: '四川省保健院南苑',
      currentNumber: 15,
      avatar: img
    },
    {
      id: 2,
      doctorName: '张医生',
      title: '主任医师',
      department: '口腔科',
      hospital: '四川省保健院南苑',
      currentNumber: 6,
      avatar: img
    }
  ];

  // 检查数据
  const examinationData: ExaminationInfo[] = [
    {
      id: 1,
      serviceName: 'CT检查室',
      hospital: '四川省保健院南苑',
      waitingCount: 15,
      type: 'examination'
    }
  ];

  // 取药数据
  const medicationData: ExaminationInfo[] = [
    {
      id: 1,
      serviceName: '药房取药',
      hospital: '四川省保健院南苑',
      waitingCount: 8,
      type: 'medication'
    }
  ];

  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
  };

  const handlePatientSwitch = (patient: any) => {
    setCurrentPatient(patient);
    setShowPatientList(false);
  };

  const getCurrentData = () => {
    switch (activeTab) {
      case '候诊 (接诊)':
        return waitingData;
      case '检查':
        return examinationData;
      case '取药':
        return medicationData;
      default:
        return waitingData;
    }
  };
const nav=useNavigate()
  return (
    <div className={styles.container}>
      {/* 头部导航 */}
      <div className={styles.header}>
        <Nabar title='候诊查询' sticky={false} />
      </div>

      {/* 患者信息卡片 */}
      <div className={styles.patientCard}>
        <div className={styles.patientInfo}>
          <div className={styles.patientName}>{currentPatient.name}</div>
          <div className={styles.patientId}>{currentPatient.id}</div>
        </div>
        <div className={styles.switchButton} onClick={() => setShowPatientList(true)}>
          <UserOutline />
          <span>切换</span>
        </div>
      </div>

      {/* 标签切换 */}
      <div className={styles.tabContainer}>
        <div 
          className={`${styles.tab} ${activeTab === '候诊 (接诊)' ? styles.activeTab : ''}`}
          onClick={() => handleTabChange('候诊 (接诊)')}
        >
          候诊 (接诊)
        </div>
        <div 
          className={`${styles.tab} ${activeTab === '检查' ? styles.activeTab : ''}`}
          onClick={() => handleTabChange('检查')}
        >
          检查
        </div>
        <div 
          className={`${styles.tab} ${activeTab === '取药' ? styles.activeTab : ''}`}
          onClick={() => handleTabChange('取药')}
        >
          取药
        </div>
      </div>

      {/* 医生列表 */}
      <div className={styles.doctorList}>
        {getCurrentData().map((item) => (
          <div key={item.id} className={styles.doctorCard}>
            {(activeTab === '检查' || activeTab === '取药') ? (
              // 检查和取药标签页的特殊布局
              <div className={styles.examinationCard}>
                <div className={styles.waitingInfo}>
                  <div className={styles.waitingLabel}>前方等待人数</div>
                  <div className={styles.waitingNumber}>{(item as ExaminationInfo).waitingCount}</div>
                </div>
                <div className={styles.serviceInfo}>
                  <div className={styles.serviceName}>{(item as ExaminationInfo).serviceName}</div>
                  <div className={styles.serviceHospital}>{(item as ExaminationInfo).hospital}</div>
                </div>
              </div>
            ) : (
              // 其他标签页的医生布局
              <div>
                <div className={styles.doctorInfo} onClick={() => nav(`/waiting_xq/${(item as DoctorInfo).id}`)}>
                  <div className={styles.doctorAvatar}>
                    <img src={(item as DoctorInfo).avatar} alt="" style={{width:'50px',height:'50px',borderRadius:'50%',objectFit:'cover'}}/>
                  </div>
                  <div className={styles.doctorDetails}>
                    <div className={styles.doctorName}>{(item as DoctorInfo).doctorName}</div>
                    <div className={styles.doctorTitle}>{(item as DoctorInfo).title}</div>
                    <div className={styles.doctorDepartment}>{(item as DoctorInfo).department}</div>
                    <div className={styles.doctorHospital}>{(item as DoctorInfo).hospital}</div>
                  </div>
                </div>
                <div className={styles.queueInfo}>
                  <div className={styles.queueBadge}>
                    <div className={styles.queueLabel}>当前接诊号</div>
                    <div className={styles.queueNumber}>{(item as DoctorInfo).currentNumber}</div>
                  </div>
                  <div className={styles.queueLink}>查看排队情况 &gt;</div>
                </div>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* 患者切换弹出层 */}
      {showPatientList && (
        <div className={styles.overlay} onClick={() => setShowPatientList(false)}>
          <div className={styles.popup} onClick={(e) => e.stopPropagation()}>
            <div className={styles.popupHeader}>
              <h3>选择患者</h3>
              <div className={styles.closeButton} onClick={() => setShowPatientList(false)}>
                ×
              </div>
            </div>
            <div className={styles.patientList}>
              {patientList.map((patient, index) => (
                <div 
                  key={index} 
                  className={`${styles.patientItem} ${currentPatient.name === patient.name ? styles.selected : ''}`}
                  onClick={() => handlePatientSwitch(patient)}
                >
                  <div className={styles.patientInfo}>
                    <div className={styles.patientName}>{patient.name}</div>
                    <div className={styles.patientId}>{patient.id}</div>
                  </div>
                  {currentPatient.name === patient.name && (
                    <div className={styles.checkIcon}>✓</div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default Index;
